<template>
  <main>
    <div class="main">
      <div class="section-content">
        <div class="search-input-wrapper">
          <a-input-search placeholder="请输入关键字" :allowClear="true" v-model="searchKeywords" @focus="inputSearchOnFocus" @change="inputSearchChange" @blur="inputSearchOnBlur" @pressEnter="searchPressEnter" />
        </div>
        <div>
          <menu-bar-pc :selectedIndex.sync="selectedIndex" :items="categories" :itemClick="menuItemClick"></menu-bar-pc>
        </div>
        <div class="collection">
          <div class="container">
            <div class="cell" v-for="(item, index) in items" :key="index" @click="itemClick(item)">
              <a-image :src="item.cover" />
              <p class="cell-headline">{{ item.enterpriseName }}</p>
              <p class="cell-subhead cell-subhead-shop">{{ item.industryCategoryName }}</p>
            </div>
          </div>
        </div>

        <a-pagination background layout="prev, pager, next" :current="currentPage" :page-size="pageSize" :total="totalCount" @change="paginationOnChange"> </a-pagination>
      </div>
    </div>
  </main>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "List",
  data() {
    return {
      selectedIndex: 0,
      searchKeywords: "",
    };
  },
  components: {},

  computed: {
    ...mapState("patent", {
      categories: (state) => state.categories,
    }),
    ...mapState("evaluationAgency", {
      items: (state) => state.items,
      pageSize: (state) => state.pageSize,
      pageTotal: (state) => state.pageTotal,
      totalCount: (state) => state.totalCount,
      currentPage: (state) => state.currentPage,
      originalPage: (state) => state.originalPage,
    }),
  },

  created() {
    document.title = "评估机构";
    const that = this;
    this.getPatentCategoryListAction({ pageNo: 1, pageSize: 99 }).catch((error) => {
      that.$message.error(error.message);
    });
    this.updateList();
  },

  methods: {
    ...mapActions("patent", ["getPatentCategoryListAction"]),
    ...mapActions("evaluationAgency", ["getEvaluationAgencyListAction", "updateCurrentPageAction", "updateOriginalPageAction"]),

    itemClick(item) {
      this.$router.push({
        path: "/enterprise/home",
        query: { id: item.id },
      });
    },

    menuItemClick(item, index) {
      this.selectedIndex = index;
      this.updateCurrentPageAction(1);
      this.updateList();
    },

    /**
     * @description: 输入框编辑聚焦(开始编辑)
     * @param {*}
     * @return {*}
     */
    inputSearchOnFocus() {
      if (!this.searchKeywords) {
        this.updateOriginalPageAction(this.currentPage);
      }
      this.updateCurrentPageAction(1);
      this.isSearchInputing = true;
    },

    /**
     * @description: 输入文本变化监听，可以用于Autocomplete的实现
     * @param {*}
     * @return {*}
     */
    inputSearchChange() {
      if (this.isSearchInputing == false) {
        if (!this.searchKeywords) {
          console.log("\n\n this.originalPage = " + JSON.stringify(this.originalPage) + "\n\n");
          this.updateCurrentPageAction(this.originalPage);
          this.updateList();
        }
      }
    },

    /**
     * @description:输入框失去编辑聚焦
     * @param {*}
     * @return {*}
     */
    inputSearchOnBlur() {
      console.log("\n\n inputSearchOnBlur this.originalPage = " + JSON.stringify(this.originalPage) + "\n\n");
      this.isSearchInputing = false;
      this.updateList();
    },

    /**
     * @description: 键盘enter事件监听
     * @param {*}
     * @return {*}
     */
    searchPressEnter() {
      console.log("\n\n searchPressEnter this.originalPage = " + JSON.stringify(this.originalPage) + "\n\n");
      this.updateList();
    },

    paginationOnChange(value) {
      this.updateCurrentPageAction(value);
      this.updateList();
    },

    updateList() {
      const that = this;
      const item = this.categories[this.selectedIndex];
      var categoryId = null;
      if (item) {
        categoryId = item.id;
      }
      const parameters = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        // categoryId: this.searchKeywords ? null : categoryId,
        categoryId: categoryId,
        enterpriseName: this.searchKeywords,
      };
      const isRefresh = true;
      const isPC = true;
      this.getEvaluationAgencyListAction({ isRefresh, parameters, isPC }).catch((error) => {
        that.$message.error(error.message);
      });
    },
  },
};
</script>

<style scoped lang="less">
.search-input-wrapper {
  padding-top: 0;
}

.section-content {
  padding-top: var(--padding-x-small);
}
</style>
